<template>
    <div class="main">
        <section>
            <div class="btn-block" v-if="rightsButtons['add']">
                <el-button type="success" size="small" icon="el-icon-circle-plus" plain @click="$router.push({name:'b-middleAdAdd'})">新增模板</el-button>
            </div>
            <el-table v-loading="loading" :data="list" element-loading-text="给我一点时间" border fit highlight-current-row>
                <el-table-column align="center" prop="sort" label="排序值"></el-table-column>
                <el-table-column align="center" prop="templateType" label="模板类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.templateType === 'LEFT_RIGHT'">左右模板</span>
                        <span v-if="scope.row.templateType === 'BIG_BIG_SMALL'">大小小模板</span>
                        <span v-if="scope.row.templateType === 'LEFT_MIDDLE_RIGHT'">左中右模板</span>
                        <span v-if="scope.row.templateType === 'RAIL'">横栏模板</span>
                        <span v-if="scope.row.templateType === 'LEFT_BIG_RIGHT_SMALL'">左大右小</span>
                        <span v-if="scope.row.templateType === 'RIGHT_BIG_LEFT_SMALL'">右大左小</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="templateStatus" label="状态">
                    <template slot-scope="scope">
                        <span  v-if="scope.row.templateStatus === 'ENABLE'">启用</span>
                        <span  v-if="scope.row.templateStatus === 'DISABLE'">未启用</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" v-if="rightsButtons['edit']">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="middleEdit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="listQuery.pageNum"
                :page-sizes="[20, 40, 60, 100]"
                :page-size="listQuery.pageSize"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="listTotal"
            ></el-pagination>   
        </section>  
    </div>
</template>
<script>
import {  middleAdList } from '@/api/bihuasuan/ad'
export default {
    name: 'b-middleAd',
    data() {
        return {
            list:[],
            loading: false,
            listQuery:{
                pageNum:1,
                pageSize: 20
            },
            listTotal:0
        }
    },
    created() {
        this.getList()
    },
    methods:{
         async getList() {
            this.loading = true
            const res = await middleAdList(this.listQuery)
            if(res.code===200) {
                this.list = res.data.list
                this.listTotal=res.data.total
                this.loading = false
            } else {
                this.loading = false
            }
         },
         //切换每页条数
        handleSizeChange(value) {
            this.listQuery.pageSize = value
            this.getList()
        },
        // 切换分页
        handleCurrentChange(page) {
            this.listQuery.pageNum = page
            this.getList()
        },
        middleEdit(row) {
            this.$router.push({name: 'b-middleAdEdit', query:{id:row.id}})
        }
    }
}
</script>